<template>
  <van-swipe-cell v-for="(item, index) in cart.cartList">
    <div class="cart-item">
      <van-checkbox
        v-model="item.ischeck"
        @change="handleCheck(item.objectId as string, item.ischeck)"
      ></van-checkbox>
      <van-card
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      >
        <template #num>
          <van-stepper
            v-model="item.num"
            theme="round"
            button-size="22"
            disable-input
          />
        </template>
      </van-card>
    </div>
    <template #right>
      <van-button
        square
        text="删除"
        type="danger"
        class="delete-button"
        @click="handleDel(index, item.objectId as string)"
      />
    </template>
  </van-swipe-cell>

  <van-submit-bar
    :price="cart.allInfo.allPrice"
    button-text="提交订单"
    @submit="handleOrder"
  >
    <van-checkbox v-model="cart.allInfo.allCheck" @click="handleAllCheck"
      >全选</van-checkbox
    >
  </van-submit-bar>
</template>

<script setup lang="ts">
import { cartPut, cartDel } from "../api/user";
import { useCart } from "../store/cart";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();

const cart = useCart();
const handleAllCheck = () => {
  let { allInfo, cartAllCheckAction } = cart;
  cartAllCheckAction(allInfo.allCheck);
  console.log(cart.allInfo.allCheck);
};

const handleDel = (idx: number, cartid: string) => {
  //删除线上
  cartDel(cartid).then((res) => {
    cart.cartList.splice(idx, 1); //删除线下
  });
};

const handleCheck = (cartid: string, ischeck: boolean) => {
  console.log(cartid, ischeck);
  cartPut(cartid, { ischeck });
};

// cart.initCartAction("641a64a3f11d5e1b034aa58f");
// 提交订单
const handleOrder = () => {
  if (cart.allInfo.allPrice == 0) {
    showToast("请选择商品后再提交");
  } else {
    router.push("/order");
  }
};
</script>

<style lang="scss" scoped>
.cart-item {
  display: flex;
  align-items: center;
  .van-card {
    /* background-color: red; */
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 50px;
}
.delete-button {
  height: 100%;
}
</style>
